<template>
    <el-container style="background-image: url('config/bg-image.png')">
        <el-aside>
            <el-row>
                <el-col :span="4" :offset="12">
                    <span class="title title-en" :style="{color: title.color}">{{title.en}}</span>
                </el-col>
                <el-col :span="4">
                    <span class="title title-zh" :style="{color: title.color}">{{title.zh}}</span>
                </el-col>
            </el-row>
        </el-aside>
        <el-main>
            <el-row>
                <el-col :span="4" :offset="1">
                    <bar ref="bar_1" :config="bar_1"></bar>
                </el-col>
                <el-col :span="4" :offset="2">
                    <bar ref="bar_2" :config="bar_2"></bar>
                </el-col>
                <el-col :span="4" :offset="2">
                    <bar ref="bar_3" :config="bar_3"></bar>
                </el-col>
                <el-col :span="4" :offset="1">
                    <liquid ref="liquid_1" :config="liquid"></liquid>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" :offset="1">
                    <bar ref="bar_4" :config="bar_4"></bar>
                </el-col>
                <el-col :span="4" :offset="2">
                    <bar ref="bar_5" :config="bar_5"></bar>
                </el-col>
                <el-col :span="4" :offset="2">
                    <bar ref="bar_6" :config="bar_6"></bar>
                </el-col>
                <el-col :span="4" :offset="1">
                    <liquid ref="liquid_2" :config="liquid"></liquid>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import bar from './bar';
    import liquid from './liquid';

    export default {
        name: 'report',
        components: {bar, liquid},
        data() {
            // eslint-disable-next-line no-undef
            return getConfig();
        },
        mounted() {
            let _this = this;
            window.onresize = function () {
                _this.$refs.bar_1.echarts.resize();
                _this.$refs.bar_2.echarts.resize();
                _this.$refs.bar_3.echarts.resize();
                _this.$refs.bar_4.echarts.resize();
                _this.$refs.bar_5.echarts.resize();
                _this.$refs.bar_6.echarts.resize();
                _this.$refs.liquid_1.echarts.resize();
                _this.$refs.liquid_2.echarts.resize();
            };

            // 3分钟后跳转到视频页面
            setTimeout(() => {
                this.$router.push('/report/video');
            }, this.other.showTime);
        },
        methods: {
            getConfig() {
                // eslint-disable-next-line no-undef
                return getConfig();
            }
        }
    }
</script>

<style scoped>
    .el-container {
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    /* 左侧css */
    .el-aside {
        width: 15% !important;
        min-width: 150px;
        overflow: hidden;
    }

    .el-aside > .el-row,
    .el-aside > .el-row > .el-col,
    .el-aside > .el-row > .el-col > .title {
        height: 100%;
        text-align: center;
        overflow: hidden;
    }

    .title-zh {
        width: 100%;
        writing-mode: vertical-lr;
        margin: 0;
        font-size: 1.4vw;
    }

    .title-en {
        width: 100%;
        writing-mode: vertical-lr;
        margin: 0;
        font-size: 1.4vw;
    }

    /* 右侧css */
    .el-main {
        height: 100%;
        overflow: hidden;
        padding-left: 0;
    }

    .el-main > .el-row {
        height: 50%;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }

    .el-main > .el-row > .el-col {
        height: 100%;
    }
</style>
